<template>
  <div class="data">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card shadow="hover" class="m-l-10-p-20">
          <template v-slot:header>
            <div class="clearfix">
              <span>注册统计</span>
              <div class="type">
                <el-form label-width="80px">
                  <el-form-item class="mb10" label="搜索">
                    <el-date-picker v-model="register_time" @change="getRegisterData" type="daterange" :range-separator="$t('common.to')" :start-placeholder="$t('common.start_time')" :end-placeholder="$t('common.end_time')" clearable>
                    </el-date-picker>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </template>
          <div class="text item text-center">
            <el-card shadow="never">
              <v-chart class="chart" :option="register" :autoresize="true"/>
            </el-card>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24" class="mb20">
        <el-card shadow="hover" class="m-l-10-p-20">
          <template v-slot:header>
            <div class="clearfix">
              <span>跟进状态统计</span>
              <div class="type">
                <el-form label-width="80px">
                  <el-form-item class="mb10" label="搜索">
                    <el-date-picker v-model="follow_time" @change="getFollowData" type="daterange" :range-separator="$t('common.to')" :start-placeholder="$t('common.start_time')" :end-placeholder="$t('common.end_time')" clearable>
                    </el-date-picker>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </template>
          <div class="text item text-center">
            <el-card shadow="never">
              <v-chart class="chart" :option="follow" :autoresize="true"/>
            </el-card>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24" class="mb20">
        <el-card shadow="hover" class="m-l-10-p-20">
          <template v-slot:header>
            <div class="clearfix">
              <span>客户状态统计</span>
              <div class="type">
                <el-form label-width="80px">
                  <el-form-item class="mb10" label="搜索">
                    <el-date-picker v-model="client_time" @change="getClientData" type="daterange" :range-separator="$t('common.to')" :start-placeholder="$t('common.start_time')" :end-placeholder="$t('common.end_time')" clearable>
                    </el-date-picker>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </template>
          <div class="text item text-center">
            <el-card shadow="never">
              <v-chart class="chart" :option="client" :autoresize="true"/>
            </el-card>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card shadow="hover" class="m-l-10-p-20">
          <template v-slot:header>
            <div class="clearfix">
              <span>分享统计</span>
              <div class="type">
                <el-form label-width="80px">
                  <el-form-item class="mb10" label="搜索">
                    <el-date-picker v-model="share_time" @change="getShareData" type="daterange" :range-separator="$t('common.to')" :start-placeholder="$t('common.start_time')" :end-placeholder="$t('common.end_time')" clearable>
                    </el-date-picker>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </template>
          <div class="text item text-center">
            <el-card shadow="never">
              <v-chart class="chart" :option="share" :autoresize="true"/>
            </el-card>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup name="statistics-index">
  import { useBase } from "@/hooks/base/useBase"

  import { use } from 'echarts/core';
  import { LineChart, BarChart, PieChart, FunnelChart } from 'echarts/charts'; //引入图例
  import { CanvasRenderer } from 'echarts/renderers' //使用canvas渲染，可选使用svg渲染
  import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    DataZoomComponent,
    LegendComponent
  } from 'echarts/components';
  import VChart from 'vue-echarts';

  use([
    TitleComponent,
    TooltipComponent,
    GridComponent,
    DatasetComponent,
    DataZoomComponent,
    LegendComponent,
    LineChart,
    BarChart,
    PieChart,
    FunnelChart,
    CanvasRenderer
  ]);

  const { router, i18n } = useBase()

  const register_time = ref([])
  const follow_time = ref([])
  const client_time = ref([])
  const share_time = ref([])
  const level = ref(4)

  const labelOption = {
    show: true,
    position: 'insideBottom',
    distance: 15,
    align: 'left',
    verticalAlign: 'middle',
    rotate: 90,
    formatter: '{c}  {name|{a}}',
    fontSize: 16,
    rich: {
      name: {}
    }
  };

  const register = reactive({
    title: {
      text: '注册总量: 0',
      subtext: '',
      left: 'center',
      textStyle: {
        fontSize: 13
      }
    },
    tooltip: {trigger: 'axis'},
    legend: {orient: 'horizontal', left: 'right', data: ['注册数']},
    xAxis: {
      type: 'category',
      data: []
    },
    yAxis: {
      type: 'value',
      minInterval: 1,
    },
    dataZoom: [
      {
        type: 'inside',
        start: 0,
        end: 100
      },
      {
        start: 0,
        end: 100
      }
    ],
    grid: {
      left: '3%',
      right: '3%',
      bottom: '3%',
      containLabel: true
    },
    series: [{
      name: '注册总数',
      type: 'bar',
      label: labelOption,
      emphasis: {
        focus: 'series'
      },
      showBackground: true,
      data: [],
    }],
  });

  // 跟进状态统计
  const follow = reactive({
    title: {
      text: '需跟进总量: 0 今日跟进总量: 0',
      subtext: '',
      left: 'center',
      textStyle: {
        fontSize: 13
      }
    },
    tooltip: {trigger: 'axis'},
    legend: {orient: 'horizontal', left: 'right', data: ['跟进数']},
    xAxis: {
      type: 'category',
      data: []
    },
    yAxis: {
      type: 'value',
      minInterval: 1,
    },
    dataZoom: [
      {
        type: 'inside',
        start: 0,
        end: 100
      },
      {
        start: 0,
        end: 100
      }
    ],
    grid: {
      left: '3%',
      right: '3%',
      bottom: '3%',
      containLabel: true
    },
    series: [],
  });


  // 客户状态统计
  const client = reactive({
    title: {
      text: '跟进中: 0, 已成交: 0, 已取消: 0, 已丢单: 0',
      subtext: '',
      left: 'center',
      textStyle: {
        fontSize: 13
      }
    },
    tooltip: {trigger: 'axis'},
    legend: {orient: 'horizontal', left: 'right', data: ['需求数']},
    xAxis: {
      type: 'category',
      data: []
    },
    yAxis: {
      type: 'value',
      minInterval: 1,
    },
    dataZoom: [
      {
        type: 'inside',
        start: 0,
        end: 100
      },
      {
        start: 0,
        end: 100
      }
    ],
    grid: {
      left: '3%',
      right: '3%',
      bottom: '3%',
      containLabel: true
    },
    series: [],
  });

  // 分享统计
  const share = reactive({
    title: {
      text: '分享统计分布',
      subtext: '',
      left: 'left',
      textStyle: {
        fontSize: 13
      }
    },
    tooltip: {trigger: 'axis'},
    legend: {orient: 'horizontal', left: 'right'},
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: []
    },
    yAxis: {
      type: 'value',
      minInterval: 1,
    },
    grid: {
      left: '3%',
      right: '3%',
      bottom: '3%',
      containLabel: true
    },
    series: [],
  });

  // 注册统计
  const getRegisterData = (register_time = []) => {
    $http({
      url: $http.adornUrl('/index/register'),
      method: 'post',
      params: $http.adornParams({
        register_time: register_time,
      }),
    }).then(({ data }) => {
      if (data && data.status === 200) {
        register.title.text = data.data.title
        register.xAxis.data = data.data.xaxis
        register.series[0].data = data.data.series.contact
      }
    })
  }

  // 客户跟踪统计
  const getFollowData = (follow_time = []) => {
    $http({
      url: $http.adornUrl('/index/follow'),
      method: 'post',
      params: $http.adornParams({
        follow_time: follow_time,
      }),
    }).then(({ data }) => {
      if (data && data.status === 200) {
        follow.title.text = data.data.title
        follow.xAxis.data = data.data.xaxis
        follow.series = data.data.series
      }
    })
  }

  // 客户跟踪统计
  const getClientData = (share_time = []) => {
    $http({
      url: $http.adornUrl('/index/client'),
      method: 'post',
      params: $http.adornParams({
        share_time: share_time,
      }),
    }).then(({ data }) => {
      if (data && data.status === 200) {
        client.title.text = data.data.title
        client.xAxis.data = data.data.xaxis
        client.series = data.data.series
      }
    })
  }

  // 分享统计
  const getShareData = (share_time = []) => {
    $http({
      url: $http.adornUrl('/index/share'),
      method: 'post',
      params: $http.adornParams({
        share_time: share_time,
      }),
    }).then(({ data }) => {
      if (data && data.status === 200) {
        share.xAxis.data = data.data.xaxis
        share.series = data.data.series
      }
    })
  }


  onMounted(() => {
    getRegisterData()
    getFollowData()
    getClientData()
    getShareData()
  })

</script>

<style lang="scss" scoped>
.h265 {
  height: 265px;
}
.el-select {
  width: 120px;
}
.chart {
  height: 62vh;
  background: #fff;
}
.clearfix {
  height: 35px;
}
.type {
  float: right;
  padding: 3px 0;
}
</style>
